<template>
	<div class="publicpageview">
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form label-width="140px" :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
					<el-form-item label="区房屋管理单位：" prop="areaUnit">
						<el-select clearable v-model="listQuery.areaUnit" @change='areaChange'>
							<div v-for="(item,index) in areaList" :key="index">
								<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管理部(分中心)：" prop="houseAdmin">
						<el-select clearable v-model="listQuery.houseAdmin" @change='HouseChange'>
							<div v-for="(item,index) in HouseList" :key="index">
								<el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管片：" prop="BlockGroup">
						<el-select clearable v-model="listQuery.BlockGroup" @change='gpChange'>
							<div v-for="(item,index) in gpList" :key="index">

								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="BlockNo">
						<el-input v-model="listQuery.BlockNo"></el-input>
					</el-form-item>
					<div>
						<el-form-item label="地址：" prop="address">
							<el-input v-model="listQuery.address"></el-input>
						</el-form-item>
						<el-form-item label="管理形式：" prop="ManageWay">
							<el-select clearable v-model="listQuery.ManageWay" placeholder="全部" style="width: 100%">
								<el-option label="正常" value="正常"></el-option>
								<el-option label="新纳入" value="新纳入"></el-option>
								<el-option label="托管房屋" value="托管房屋"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="产别：" prop="OwnWay">
							<el-select clearable v-model="listQuery.OwnWay" placeholder="全部" style="width: 100%">
								<el-option label="公产" value="公产"></el-option>
								<el-option label="代管产" value="代管产"></el-option>
								<el-option label="经营产" value="经营产"></el-option>
								<el-option label="托管产" value="托管产"></el-option>
								<el-option label="教会产" value="教会产"></el-option>
								<el-option label="国有自营产" value="国有自营产"></el-option>
								<el-option label="股份企业产" value="股份企业产"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="门号：" prop="BuildingDoorNo">
							<el-input v-model="listQuery.BuildingDoorNo"></el-input>
						</el-form-item>
						<el-form-item label="性质：" prop="LivingWay">
							<el-select clearable v-model="listQuery.LivingWay" placeholder="全部" style="width: 100%">
								<el-option label="住宅" value="住宅"></el-option>
								<el-option label="非住宅" value="非住宅"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="经营：" prop="RunWay">
							<el-select clearable v-model="listQuery.RunWay" placeholder="全部" style="width: 100%">
								<el-option label="已经营" value="已经营"></el-option>
								<el-option label="未经营" value="未经营"></el-option>
								<el-option label="它往户" value="它往户"></el-option>
								<el-option label="停止经营" value="停止经营"></el-option>
								<el-option label="掌管" value="掌管"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="承租人：" prop="Renter">
							<el-input v-model="listQuery.Renter"></el-input>
						</el-form-item>
						<el-form-item label="合同编号：" prop="ContractID">
							<el-input v-model="listQuery.ContractID"></el-input>
						</el-form-item>
						<el-form-item label="身份证号：" prop="RenterIDNo">
							<el-input v-model="listQuery.RenterIDNo"></el-input>
						</el-form-item>
						<el-form-item label="可售：" prop="issell">
							<el-select clearable v-model="listQuery.issell" placeholder="全部" style="width: 100%">
								<el-option label="可售" value="可售"></el-option>
								<el-option label="不可售" value="不可售"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="日期：" prop="StartSignDate">
							<el-date-picker v-model="listQuery.StartSignDate" type="date" placeholder="年/月/日" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</div>

				</div>
			</el-form>
			<div div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
				<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>

		<div class="publitableview">
			<el-button v-if="isCompute('承租户档案-录入')" type="primary" size="mini" @click="handleAddUser">录入</el-button>
			<el-button type="primary" size="mini" @click="openQuanxian">权限申请</el-button>
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="编号" prop="renterid" width="100">
				</el-table-column>

				<el-table-column align="center" label="承租人" prop="renter" min-width="100">
				</el-table-column>

				<el-table-column align="center" label="证件号码" prop="renteridno" min-width="150">
				</el-table-column>

				<el-table-column align="center" label="地址" prop="address" min-width="200">
				</el-table-column>
			
				<!-- <el-table-column align="center" label="联系电话" prop="phone" min-width="120">
				</el-table-column> -->

				<el-table-column align="center" label="合同编号" prop="contractid" min-width="100">
				</el-table-column>

				<el-table-column align="center" label="订房日期" prop="startrentdate" width="100">
					<template slot-scope="scope">
						{{scope.row.startrentdate?scope.row.startrentdate.split(' ')[0]:''}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="起租日期" prop="startsigndate" width="100">
					<template slot-scope="scope">
						{{scope.row.startsigndate?scope.row.startsigndate.split(' ')[0]:''}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="管片" prop="blockgroup" width="80">
				</el-table-column>

				<el-table-column align="center" label="所号" prop="blockno" width="80">
				</el-table-column>

				<el-table-column align="center" label="状态" prop="statflag">
					<template slot-scope="scope">
						{{scope.row.statflag==0?'正常':scope.row.statflag==1?'已终止':''}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" width="200" fixed="right">
					<template slot-scope="scope">
						<el-button v-if="isCompute('承租户档案-详情')" type="text" size="mini" @click="detailPrint(scope.row)">详情</el-button>
						<el-button v-if="isCompute('承租户档案-删除')" type="text" size="mini" @click="dellPrint(scope.row.renterid)">删除</el-button>
						<el-button v-if="isCompute('承租户档案-修改')" type="text" size="mini" @click="deitPrint(scope.row)">修改</el-button>
						<el-button type="text" size="mini">催收</el-button>
						<el-button type="text" size="mini">诉讼</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<!-- 承租户详情弹窗 -->
		<el-dialog title="承租户详情" :visible.sync="dialogVisible" width="1200px" @close="handleDialogClose">
			<div class="tenant-detail">
				<!-- 承租人信息 -->
				<h4 class="section-title">承租人信息</h4>
				<el-row :gutter="20" class="info-row">
					<div class="addForm-col">
						<div class="info-item">
							<label>承租人：</label>
							<span>{{ tenantDetail.tenant }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>证件号码：</label>
							<span>{{ tenantDetail.idNumber }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>证件号码：</label>
							<span>{{ tenantDetail.idNumber2 }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>联系电话：</label>
							<span>{{ tenantDetail.phone }}</span>
						</div>
					</div>
				</el-row>

				<!-- 承租合同信息 -->
				<h4 class="section-title">承租合同信息</h4>
				<el-row :gutter="20" class="info-row">
					<el-col :span="8">
						<div class="info-item">
							<label>售房单位：</label>
							<span>{{ tenantDetail.sellingUnit }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label>订房日期：</label>
							<span>{{ tenantDetail.bookingDate }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label>起租日期：</label>
							<span>{{ tenantDetail.startDate }}</span>
						</div>
					</el-col>
				</el-row>

				<!-- 合同关联所信息 -->
				<h4 class="section-title">合同关联所信息</h4>
				<el-row :gutter="20" class="info-row">
					<div class="addForm-col">
						<div class="info-item">
							<label>管片：</label>
							<span>{{ tenantDetail.district }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>所号：</label>
							<span>{{ tenantDetail.houseNumber }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>地址：</label>
							<span>{{ tenantDetail.address }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>间号：</label>
							<span>{{ tenantDetail.roomNumber }}</span>
						</div>
					</div>
				</el-row>
				<el-row :gutter="20" class="info-row">
					<div class="addForm-col">
						<div class="info-item">
							<label>性质：</label>
							<span>{{ tenantDetail.nature }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>产别：</label>
							<span>{{ tenantDetail.propertyType }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>是否可盈：</label>
							<span>{{ tenantDetail.isProfitable }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>是否经营：</label>
							<span>{{ tenantDetail.isBusiness }}</span>
						</div>
					</div>
				</el-row>
				<el-row :gutter="20" class="info-row">
					<div class="addForm-col">
						<div class="info-item">
							<label>成套：</label>
							<span>{{ tenantDetail.isComplete }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>独用面积：</label>
							<span>{{ tenantDetail.exclusiveArea }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>使用面积：</label>
							<span>{{ tenantDetail.usageArea }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>租金定额：</label>
							<span>{{ tenantDetail.rentQuota }}</span>
						</div>
					</div>
				</el-row>
				<el-row :gutter="20" class="info-row">
					<div class="addForm-col">
						<div class="info-item">
							<label>减免租金：</label>
							<span>{{ tenantDetail.rentReduction }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>核减租金：</label>
							<span>{{ tenantDetail.verifiedReduction }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>月应收：</label>
							<span>{{ tenantDetail.monthlyReceivable }}</span>
						</div>
					</div>
					<div class="addForm-col">
						<div class="info-item">
							<label>盈亏：</label>
							<span>{{ tenantDetail.profitLoss }}</span>
						</div>
					</div>
				</el-row>
				<el-row :gutter="20" class="info-row">
					<el-col :span="24">
						<div class="info-item">
							<label>附件：</label>
							<el-button type="text" @click="viewAttachment">查看附件</el-button>
						</div>
					</el-col>
				</el-row>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false">返回</el-button>
			</div>
		</el-dialog>

		<el-dialog v-if='luruVisible' :title="typeName" :visible.sync="luruVisible" width="80%" :before-close="handleClose"
			style="margin-top: 0px;">
			<div class="tab1-demo-topTab">
				<scrollable-tabs :tabs="tabs" :max-visible-tabs="4" v-model="activeTab" @tab-click="handleTabClick">
					<!-- 自定义标签内容 -->
					<template v-slot:tab="{ tab, index }">
						<div class="custom-tab">
							{{ tab.name }}
						</div>
					</template>
				</scrollable-tabs>
				<div class="tab1-demo-topTab-btn">
					<el-button type="primary" @click="gotoSuo" size="medium">所资料</el-button>
					<el-button type="primary" size="medium">收租</el-button>
				</div>
			</div>
			<div v-if="activeTab==0" class="tab1-demo-ruleForm">
				<el-form :rules='rules' :model="addQuery" ref="addForm" class="demo-ruleForm" label-position="right"
					label-width="150px">
					<div class="addForm-row">
						<div class="addForm-col">
							<el-form-item label="管片：" prop="blockgroup" label-width="150px">
								<el-select v-model="addQuery.blockgroup">
									<div v-for="(item,index) in gpList" :key="index">
										<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
									</div>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="所号：" prop="blockno" label-width="150px">
								<el-select v-model="addQuery.blockno" @change="blListChange" value-key="blockno">
									<div v-for="(item,index) in blList" :key="index">
										<el-option :label="item.blockno" :value="item" :key="index"></el-option>
									</div>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="门号：" prop="buildingdoorno" label-width="150px">
								<el-input v-model="addQuery.buildingdoorno"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="门序：" prop="rentcountno" label-width="150px">
								<el-input v-model="addQuery.rentcountno"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="机器编号：" prop="renterid" label-width="150px">
								<el-input v-model="addQuery.renterid"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="地址：" prop="address" label-width="150px">
								<el-input v-model="addQuery.address"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="管理形式：" prop="manageway" label-width="150px">
								<el-select v-model="addQuery.manageway" placeholder="全部" style="width: 100%">
									<el-option label="正常" value="正常"></el-option>
									<el-option label="新纳入" value="新纳入"></el-option>
									<el-option label="托管房屋" value="托管房屋"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="产别：" prop="ownway" label-width="150px">
								<el-select v-model="addQuery.ownway" style="width: 100%">
									<div v-for="(item,index) in chanbieList" :key="index">
										<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
									</div>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="居室间号：" prop="roomno" label-width="150px">
								<el-input disabled v-model="addQuery.roomno"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="居室间数：" prop="roomcount">
								<el-input disabled v-model="addQuery.roomcount"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="合同编号：" prop="contractid">
								<div style="display: flex;">
									<el-input class="hetongClass" v-model="addQuery.contractid"></el-input>
									<el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">生成</el-button>
								</div>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="可售：" prop="issell">
								<el-select v-model="addQuery.issell" style="width: 100%">
									<el-option label="可售" value="可售"></el-option>
									<el-option label="不可售" value="不可售"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="承租人：" prop="renter" label-width="150px">
								<el-input v-model="addQuery.renter"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="证件类型：" label-width="150px" prop="certificatetype">
								<el-select v-model="addQuery.certificatetype" style="width: 100%">
									<div v-for="(item,index) in shenfenList" :key="index">
										<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
									</div>
								</el-select>


							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="证件号码：" prop="renteridno" label-width="150px">
								<el-input v-model="addQuery.renteridno"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="自然间数(独)：" prop="singleuseroomscount" label-width="150px">
								<el-input disabled v-model="addQuery.singleuseroomscount"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="自然间数(伙)：" prop="shareroomscount" label-width="150px">
								<el-input disabled v-model="addQuery.shareroomscount"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="计租面积(独)：" prop="singleusearea" label-width="150px">
								<el-input disabled v-model="addQuery.singleusearea"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="计租面积(伙)：" prop="sharearea" label-width="150px">
								<el-input disabled v-model="addQuery.sharearea"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="性质：" prop="livingway" label-width="150px">
								<el-select v-model="addQuery.livingway" style="width: 100%">
									<el-option label="住宅" value="住宅"></el-option>
									<el-option label="非住宅" value="非住宅"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="摊后计租面积：" prop="afterarea" label-width="150px">
								<el-input disabled v-model="addQuery.afterarea"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="租定金额：" prop="monthrent" label-width="150px">
								<el-input disabled v-model="addQuery.monthrent"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="月实应收：" prop="realrent" label-width="150px">
								<el-input disabled v-model="addQuery.realrent"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="订约日期：" prop="startsigndate" label-width="150px">
								<el-date-picker v-model="addQuery.startsigndate" type="date" placeholder="年/月/日" style="width: 100%">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="起租日期：" label-width="150px" prop="startrentdate">
								<el-date-picker v-model="addQuery.startrentdate" type="date" placeholder="年/月/日" style="width: 100%">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="减免：" label-width="150px" prop="discountreason">
								<el-select v-model="addQuery.singleuseflag" style="width: 100%">
									<div v-for="(item,index) in jianmianList" :key="index">
										<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
									</div>
								</el-select>
							</el-form-item>
						</div>

						<div class="addForm-col">
							<el-form-item label="核减原因：" label-width="150px" prop="discountreason">
								<el-select v-model="addQuery.discountreason" style="width: 100%" @change='hejianChange'>
									<div v-for="(item,index) in hejianyuanyingList" :key="index">
										<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
									</div>
								</el-select>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="减租：" label-width="150px" prop="rentdiscount">
								<el-input disabled v-model="addQuery.rentdiscount"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="退约日期：" label-width="150px" prop="stopsigndate">
								<el-date-picker v-model="addQuery.stopsigndate" type="date" placeholder="年/月/日" style="width: 100%">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="停租日期：" label-width="150px" prop="stoprentdate">
								<el-date-picker v-model="addQuery.stoprentdate" type="date" placeholder="年/月/日" style="width: 100%">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="违约金额：" label-width="150px" prop="rentDiscount1">
								<el-input v-model="addQuery.rentDiscount1"></el-input>
							</el-form-item>
						</div>
						<div class="addForm-col">
							<el-form-item label="盈亏：" label-width="150px" prop="profitloss">
								<el-input v-model="addQuery.profitloss"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div v-if="activeTab==1">
				<!-- 档案录入变动情况 -->
				<el-table :data="tableData" border style="width: 100%" max-height='500px'>
					<el-table-column prop="date" label="日期" width="150">
					</el-table-column>
					<el-table-column prop="name" label="起始年月" width="120">
					</el-table-column>
					<el-table-column prop="province" label="终止年月" width="120">
					</el-table-column>
					<el-table-column prop="city" label="是否经营" width="120">
					</el-table-column>
					<el-table-column prop="address" label="未经营类别" width="120">
					</el-table-column>
					<el-table-column prop="zip" label="未经营类别明细" width="120">
					</el-table-column>
					<el-table-column prop="zip" label="收租方式" width="120">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
							<el-button type="text" size="small" @click="delectbd">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="activeTab==2">
				<!-- 档案录入变动依据 -->
				<el-table :data="tableData" border style="width: 100%" max-height='500px'>
					<el-table-column prop="date" label="日期" width="180">
					</el-table-column>
					<el-table-column prop="name" label="类别" width="180">
					</el-table-column>
					<el-table-column prop="province" label="依据" width="180">
					</el-table-column>
					<el-table-column prop="city" label="备注">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="140">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
							<el-button type="text" size="small" @click="delectbd">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="activeTab==3">
				录入房间情况
			</div>
			<div v-if="activeTab==4">
				历史租金情况
			</div>
			<div v-if="activeTab==5">
				违约金情况
			</div>
			<div v-if="activeTab==6">
				租凭合同打印历史
			</div>
			<div v-if="activeTab==7">
				租凭合同图像上传
			</div>
			<div v-if="activeTab==8">
				未经营原始凭证上传
			</div>
			<div class="demo-ruleForm-footerbtn">
				<el-button type="primary" @click="lurufangjianqingkuang" size="medium">录入房间情况</el-button>
				<el-button type="primary" @click="lurulishizujin" size="medium">历史租金情况</el-button>
				<el-button type="primary" size="medium" @click="openWeiyue">违约金情况</el-button>
				<el-dropdown>
					<el-button type="primary" size="medium">
						更多<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>租凭合同打印历史</el-dropdown-item>
						<el-dropdown-item>租凭合同图像上传</el-dropdown-item>
						<el-dropdown-item>未经营原始凭证上传</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button type="primary" @click="save" size="medium">保 存</el-button>
			</div>


			<el-dialog append-to-body v-if='isWeiyue' title="违约金" :visible.sync="isWeiyue" width="80%" :before-close="handleClose"
				style="margin-top: 70px;">
				<el-button style="margin-bottom:10px;" type="primary" size="mini" @click="handleAddWeiyue">录入</el-button>
				<el-table :data="weiyueList" border style="width: 100%;" max-height='500px'>
					<el-table-column prop="penaltyTime" label="年月" width="350">
					</el-table-column>
					<el-table-column prop="penalty" label="违约金" width="450">
					</el-table-column>
					<el-table-column prop="remake" label="备注" width="450">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="detailWeiyue(scope.row)" type="text" size="small">修改</el-button>
							<!-- <el-button type="text" size="small" @click="delectbd">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<div class="saveContent">
					<el-button
						type="primary"
						@click="weiyueJieqing"
						size="medium"
					>确定结清</el-button>
				</div>
			</el-dialog>
			
			<el-dialog append-to-body v-if='WeiyueLuru' :title="weiyueName" :visible.sync="WeiyueLuru" width="40%" :before-close="handleClose"
				style="margin-top: 70px;">
				<el-form
				  :rules='weiyueRule'
				  :model="weiyueQuery"
				  ref="weiyueForm"
				  class="demo-ruleForm luruClass"
				  label-position="right"
				  label-width="170px"
				>
				<el-form-item
				  label="违约金："
				  prop="penalty"
				>
				  <el-input v-model.number="weiyueQuery.penalty"></el-input>
				</el-form-item>
				<el-form-item
				  label="年月："
				  prop="penaltyTime"
				>
				  <el-date-picker
				    v-model="weiyueQuery.penaltyTime"
				    type="date"
				    placeholder="选择日期时间"
				    align="right"
				  >
				  </el-date-picker>
				</el-form-item>
				<el-form-item
				  label="备注："
				  prop="remake"
				>
				  <el-input v-model.number="weiyueQuery.remake"></el-input>
				</el-form-item>
				</el-form>
				
				<div class="saveContent">
				  <el-button
				    type="primary"
				    @click="weiyueSave"
				    size="medium"
				  >保 存</el-button>
				</div>
			</el-dialog>
			
		</el-dialog>
		
		
		
		<!-- 弹窗部分 -->
		<el-dialog title="操作权限申请" :visible.sync="isQuanxian" width="50%" :before-close="handleClose">
			<el-form :model="qxQuery" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="权限名称：" prop="permission">
					<el-select v-model="qxQuery.permission">
						<el-option label="承租户档案-修改" value="承租户档案-修改"></el-option>
						<el-option label="承租户档案-录入" value="承租户档案-录入"></el-option>
						<el-option label="承租户档案-详情" value="承租户档案-详情"></el-option>
						<el-option label="承租户档案-删除" value="承租户档案-删除"></el-option>
					</el-select>
				</el-form-item>
		
				<el-form-item label="申请人员：" prop="userName">
					<el-input v-model="qxQuery.userName" disabled></el-input>
				</el-form-item>
		
				<el-form-item label="生效开始时间：" prop="startTime">
					<el-date-picker v-model="qxQuery.startTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>
		
				<el-form-item label="生效结束时间：" prop="endTime">
					<el-date-picker v-model="qxQuery.endTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>
		
				<el-form-item label="申请缘由说明：" prop="remake">
					<el-input v-model="qxQuery.remake" type="textarea" :rows="2"></el-input>
				</el-form-item>
			</el-form>
		
			<div class="saveContent">
				<el-button type="primary" @click="qxSave" size="medium">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		getArea,
		getHouseAdmin,
		blockGroupList,
		blockList,
		permissionApply,
	} from '@/api/industry'
	import {
		rentList,
		addRenter,
		createCID,
		renterPenaltyList,
		addRenterPenalty,
		updRenterPenalty,
		settleRenterPenalty,
		delRenterData
	} from '@/api/management'
	import ScrollableTabs from '@/components/ScrollableTabs.vue'
	export default {
		name: 'Chengzuhudangan',
		components: {
			ScrollableTabs
		},
		data() {
			return {
				tabs: [{
						name: '基本信息'
					},
					{
						name: '录入档案变动情况'
					},
					{
						name: '录入档案变动依据'
					}
				],
				activeTab: 0,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					areaUnit: '',
					houseAdmin: '',
					address: '',
					BlockGroup: '',
					BlockNo: '',
					BuildingDoorNo: '',
					ContractID: '',
					issell: '',
					DID: '',
					LivingWay: '',
					ManageWay: '',
					OwnWay: '',
					Renter: '',
					RenterIDNo: '',
					RunWay: '',
					StartSignDate: ''
				},
				addQuery: {
					certificatetype: '',
					blockgroup: '',
					blockno: '',
					buildingdoorno: '',
					rentcountno: '',
					renterid: '',
					address: '',
					manageway: '',
					ownway: '',
					roomno: '',
					roomcount: '',
					contractid: '',
					singleuseflag: '',
					issell: '',
					renter: '',
					renteridno: '',
					singleuseroomscount: '',
					shareroomscount: '',
					singleusearea: '',
					sharearea: '',
					livingway: '',
					afterarea: '',
					monthrent: '',
					realrent: '',
					startsigndate: '',
					startrentdate: '',
					discountreason: '',
					rentdiscount: '',
					stopsigndate: '',
					stoprentdate: '',
					rentDiscount1: '',
					profitloss: ''
				},
				newAddList: {},
				rules: {
					blockgroup: [{
						required: true,
						message: '请选择管片',
						trigger: 'blur'
					}],
					blockno: [{
						required: true,
						message: '请选择所号',
						trigger: 'blur'
					}],
					buildingdoorno: [{
						required: true,
						message: '请输入门号',
						trigger: 'blur'
					}],
					rentcountno: [{
						required: true,
						message: '请输入门序',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					manageway: [{
						required: true,
						message: '请输入管理形式',
						trigger: 'blur'
					}],
					ownway: [{
						required: true,
						message: '请选择产别',
						trigger: 'blur'
					}],
					contractid: [{
						required: true,
						message: '请输入/生成合同编号',
						trigger: 'blur'
					}],
					singleuseflag: [{
						required: true,
						message: '请选择成套',
						trigger: 'blur'
					}],
					issell: [{
						required: true,
						message: '请选择可售',
						trigger: 'blur'
					}],
					renter: [{
						required: true,
						message: '请输入承租人',
						trigger: 'blur'
					}],
					renteridno: [{
						required: true,
						message: '请输入证件号码',
						trigger: 'blur'
					}],
					
					certificatetype: [{
						required: true,
						message: '请选择证件类型',
						trigger: 'blur'
					}],
					livingway: [{
						required: true,
						message: '请选择性质',
						trigger: 'blur'
					}],
					startsigndate: [{
						required: true,
						message: '请选择订约日期',
						trigger: 'blur'
					}],
					startrentdate: [{
						required: true,
						message: '请选择起租日期',
						trigger: 'blur'
					}]
				},
				total: 0,
				list: [],
				listLoading: false,
				dialogVisible: false,
				tenantDetail: {},
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 管片列表
				gpList: [],
				isSearch: false,
				luruVisible: false,
				blList: [],

				tableData: [],
				rentId: '',
				// 产别
				chanbieList: [],
				chanyeList: [],
				shenfenList: [],
				jianmianList: [],
				hejianyuanyingList: [],
				typeName: '',
				weiyueQuery:{
					penalty:'',
					penaltyTime:'',
					remake:'',
					status:0
				},
				isWeiyue: false,
				weiyueList:[],
				WeiyueLuru:false,
				weiyueRule:{
					penalty: [{
						required: true,
						message: '请输入违约金',
						trigger: 'blur'
					}],
					penaltyTime: [{
						required: true,
						message: '请选择时间',
						trigger: 'blur'
					}],
					remake: [{
						required: true,
						message: '请输入备注',
						trigger: 'blur'
					}],
				},
				weiyueName:'',
				blockid:'',
				isQuanxian: false,
				userList:[],
				qxQuery: {
					endTime: '',
					permission: '',
					remake: '',
					startTime: '',
					userName: ''
				},
			}
		},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('jinying'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '产别') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '产别') {
							this.chanbieList = it.classdetailList
						}
					})
				} else if (item.classname == '证件类型') {
					this.shenfenList = item.classmidList
				} else if (item.classname == '减免') {
					this.jianmianList = item.classmidList
				} else if (item.classname == '减核原因') {
					this.hejianyuanyingList = item.classmidList
				}
			})

			this.qxQuery.userName = localStorage.getItem('username')
			this.getArea()
			this.userList = JSON.parse(localStorage.getItem('userList'))
			
			this.newAddList = JSON.stringify(this.addQuery)
		},

		methods: {
			hejianChange(e){
				console.log(e)
				this.hejianyuanyingList.forEach((item,index)=>{
					if(e==item.classmid){
						item.classdetailList.forEach((it,idx)=>{
							this.addQuery.rentdiscount = it.value
						})
					}
				})
			},
			createcID() {
				if (this.addQuery.buildingdoorno == '') {
					this.$message({
						type: 'success',
						message: '请输入门号'
					})
				} else if (this.addQuery.blockno == '') {
					this.$message({
						type: 'success',
						message: '请输入所号'
					})
				} else {
					let data = {
						RentCountNo: this.addQuery.buildingdoorno,
						blockno: this.addQuery.blockno
					}
					createCID(data).then(res => {
						this.addQuery.contractid = res.data
					})
				}

			},
			blockList() {
				let data = {
					limit: 99999,
					page: 1
				}
				blockList(data).then((res) => {
					this.blList = res.data.list
				})
			},
			blListChange(e){
				console.log(e)
				this.blockid = e.blockid
				this.addQuery.blockno = e.blockno
			},
			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data

					this.blockGroupList()
					this.rentList()
					this.blockList()
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				if(e){
					this.listQuery.areaUnit = e
					this.getHouseAdmin(e)
				}
					this.listQuery.houseAdmin = ''
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.houseAdmin = e
			},
			//管片
			gpChange(e) {
				this.listQuery.BlockGroup = e
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
				this.rentList()
			},
			// 管片列表
			blockGroupList() {
				let data = {
					pageNum: 1,
					pageSize: 9999999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.gpList = res.data.list
					this.listLoading = false
				})
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.rentList()
			},
			// 搜索
			handleSearch() {
				this.rentList()
			},
			rentList() {
				let data = this.listQuery
				data.StartSignDate = data.StartSignDate ?
					dayjs(data.StartSignDate).format('YYYY-MM-DD HH:mm:ss') :
					''
				data.aid = data.houseAdmin
				rentList(data).then((res) => {
					console.log(res)
					this.list = res.data.list
					this.total = res.data.total
				})
			},
			// 重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields()
			},
			// 打印详情
			handlePrint(row) {
				// 填充详情数据
				this.tenantDetail = {
					tenant: row.tenant,
					idNumber: row.idNumber,
					idNumber2: row.idNumber,
					phone: row.phone,
					sellingUnit: '和平区房屋管理中心',
					bookingDate: row.bookingDate,
					startDate: row.startDate,
					district: row.district,
					houseNumber: row.houseNumber,
					address: '天津市和平区某某街道123号',
					roomNumber: '101',
					nature: '居住',
					propertyType: '住宅',
					isProfitable: '可盈',
					isBusiness: '不经营',
					isComplete: '成套',
					exclusiveArea: '50.5㎡',
					usageArea: '45.2㎡',
					rentQuota: '350元',
					rentReduction: '0元',
					verifiedReduction: '0元',
					monthlyReceivable: '350元',
					profitLoss: '盈利'
				}
				this.dialogVisible = true
			},
			// 弹窗关闭
			handleDialogClose() {
				this.tenantDetail = {}
			},
			// 查看附件
			viewAttachment() {
				this.$message.info('查看附件功能待开发')
			},
			handleAddUser() {
				this.$router.push('chengzuhudanganluru')
				this.typeName = '档案录入'
			},
			detailPrint(e) {
				this.addQuery = e
				this.addQuery.realrent = this.addQuery.realrent.toFixed(1)
				this.rentId = e.renterid
				this.blList.forEach((item,index)=>{
					if(e.blockno == item.blockno){
						this.blockid = item.blockid
					}
				})
				this.$router.push({
				  path: 'chengzuhudanganluru',
				  query: {blocktype:1, blockid: this.blockid, rentId: this.rentId, addQuery: JSON.stringify(this.addQuery) }
				})
			},
			deitPrint(e){
				this.addQuery = e
				this.addQuery.realrent = this.addQuery.realrent.toFixed(1)
				this.rentId = e.renterid
				this.blList.forEach((item,index)=>{
					if(e.blockno == item.blockno){
						this.blockid = item.blockid
					}
				})
				this.$router.push({
				  path: 'chengzuhudanganluru',
				  query: {blocktype:2, blockid: this.blockid, rentId: this.rentId, addQuery: JSON.stringify(this.addQuery) }
				})
			},
			dellPrint(renterid){
				let data = {
					renterId:renterid
				}
				delRenterData(data).then(res=>{
					this.$message({
						type: 'success',
						message: '操作成功!'
					})
					this.rentList()
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
						this.addQuery = JSON.parse(this.newAddList)

						this.rester()
					})
					.catch((_) => {})
			},
			save() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						let data = this.addQuery
						data.startsigndate = dayjs(data.startsigndate).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						data.startrentdate = dayjs(data.startrentdate).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						data.stopsigndate = data.stopsigndate?dayjs(data.stopsigndate).format(
							'YYYY-MM-DD HH:mm:ss'
						):''
						data.stoprentdate = data.stoprentdate?dayjs(data.stoprentdate).format(
							'YYYY-MM-DD HH:mm:ss'
						):''
						addRenter(data).then((res) => {
							console.log(res)
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.rentList()
							this.rentId = res.data.renterid
						})
					} else {
						console.log('验证失败！')
						return false
					}
				})
			},
			// 弹窗内容删除
			delectbd() {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			gotoSuo() {
				if (this.addQuery.blockno) {
					const route = this.$router.resolve({
						path: '/industry/chanyeziliao/suoziliaoluru',
						query: {
							blockno: this.addQuery.blockno,
							type: 3,
							blockid:this.blockid
						}
					})
					window.open(route.href, '_blank')
				} else {
					this.$message({
						type: 'success',
						message: '请选择所号'
					})
				}
			},

			lurufangjianqingkuang() {
				if (this.rentId) {
					const route = this.$router.resolve({
						path: '/management/chengzuhuguanli/fangjianluru',
						query: {
							rentId: this.rentId,
							blockno: this.addQuery.blockno
						}
					})
					window.open(route.href, '_blank')
				} else {
					this.$message({
						type: 'success',
						message: '请先保存信息'
					})
				}
			},
			lurulishizujin() {
				if (this.rentId) {
					const route = this.$router.resolve({
						path: '/management/chengzuhuguanli/lishizujinluru',
						query: {
							rentId: this.rentId,
							blockno: this.addQuery.blockno
						}
					})
					window.open(route.href, '_blank')
				} else {
					this.$message({
						type: 'success',
						message: '请先保存信息'
					})
				}
			},
			openWeiyue() {
				if (this.rentId) {
					this.isWeiyue = true
					let data = {
						rentId:this.rentId
					}
					renterPenaltyList(data).then(res=>{
						console.log(res)
						this.weiyueList=res.data
					})
				} else {
					this.$message({
						type: 'success',
						message: '请先保存信息'
					})
				}
				
			},
			handleAddWeiyue(){
				this.WeiyueLuru = true
				this.weiyueName = '添加'
			},
			weiyueSave(){
				this.$refs.weiyueForm.validate((valid) => {
					if (valid) {
						let data = this.weiyueQuery
						data.penaltyTime = dayjs(data.penaltyTime).format('YYYY-MM')
						data.renterId = this.rentId
						if(this.weiyueName == '添加'){
							addRenterPenalty(data).then(res=>{
								console.log(res)
								this.$message({
									type: 'success',
									message: '操作成功!'
								})
								this.WeiyueLuru = false
								this.openWeiyue()
							})
						}else{
							updRenterPenalty(data).then(res=>{
								console.log(res)
								this.$message({
									type: 'success',
									message: '操作成功!'
								})
								this.WeiyueLuru = false
								this.openWeiyue()
							})
						}
						
					} else {
						console.log('验证失败！')
						return false
					}
				})
			},
			detailWeiyue(e){
				this.weiyueQuery = e
				this.weiyueName = '修改'
				this.WeiyueLuru = true
			},
			weiyueJieqing(){
				this.$confirm('此操作将结清违约金，请确认是否继续操作？', '结清提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							rentId : this.rentId
						}
						settleRenterPenalty(data).then(res=>{
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.openWeiyue()
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
					})
			},
			// handleTabChange(index) {
			//   console.log('标签改变:', index)
			//   this.activeName = index
			// },
			handleTabClick(index) {
				this.activeTab = index
			},
			isCompute(name) {
				if (this.userList.find((item) => item.permission === name)) {
					return true
				} else {
					return false
				}
			},
			// 权限申请
			openQuanxian() {
				this.isQuanxian = true
			},
			qxSave() {
				let data = this.qxQuery
				data.startTime = data.startTime ?
					dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss') :
					''
				data.endTime = data.endTime ?
					dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss') :
					''
					data.type = 1
				permissionApply(data).then((res) => {
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					})
					this.isQuanxian = false
				})
			},
		}
	}
</script>

<style scoped>
	/* 页面样式继承公共样式类 publicpageview, publicformview, publitableview */

	/* 详情弹窗样式 */
	.tenant-detail {
		padding: 20px;
	}

	.section-title {
		margin: 20px 0 15px 0;
		font-size: 16px;
		font-weight: 500;
		color: #409eff;
		border-left: 4px solid #409eff;
		padding-left: 10px;
	}

	.section-title:first-child {
		margin-top: 0;
	}

	.info-row {
		margin-bottom: 15px;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 8px 0;
		min-height: 25px;
	}

	.info-item label {
		min-width: 80px;
		font-weight: 500;
		color: #606266;
		margin-right: 10px;
		text-align: right;
		min-height: 25px;
	}

	.info-item span {
		color: #303133;
		background-color: #f5f7fa;
		padding: 4px 8px;
		border-radius: 4px;
		flex: 1;
		min-height: 25px;
	}

	.dialog-footer {
		text-align: center;
		padding-top: 20px;
	}

	/deep/.el-input__inner {
		width: 160px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}

	/deep/.el-dialog__body {
		padding: 0 20px;
	}

	.saveContents {
		width: 100%;
		display: flex;
		margin-top: 20px;
		padding-bottom: 20px;
		justify-content: end;
	}

	.saveContent {
		width: 100%;
		display: flex;
		margin-top: 20px;
		padding-bottom: 20px;
		justify-content: end;
	}

	.contents {
		width: 85%;
		display: flex;
		align-items: center;
		justify-content: start;
		flex-wrap: wrap;

		button {
			margin-bottom: 10px;
			margin-left: 10px;
		}
	}

	.demo-ruleForm {
		padding-top: 20px;
	}

	.demo-ruleForm-footerbtn {
		text-align: right;
		padding: 20px 0;
	}

	.tab1-demo-ruleForm {
		height: 50vh;
		overflow-y: scroll;
	}

	.addForm-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	/deep/ .el-dropdown {
		margin: 0 10px;
	}

	.tab1-demo-topTab {
		position: relative;
	}

	.tab1-demo-topTab-btn {
		position: absolute;
		top: 5px;
		right: 10px;
	}

	/deep/ .hetongClass .el-input__inner {
		width: 100px;
	}
	/deep/ .luruClass .el-input__inner {
		width: 300px;
	}
	
</style>